<template>
  <div class="chat-box">

    <div class="chat">
      <div class="top">
        <el-image :src="profile" />
      </div>

    </div>

    <div class="friend">
      <div class="search">
        <svg-icon icon-class="search"/>
        <input type="text" />
      </div>
      <div class="list">
        <div class="list-name" @click="friend.admin = !friend.admin"><i :class="friend.admin ? 'el-icon-arrow-down':'el-icon-arrow-right'" /><span>管理好友（35）</span></div>
        <div class="list-name" @click="friend.shop = !friend.shop"><i :class="friend.shop ? 'el-icon-arrow-down': 'el-icon-arrow-right'" /><span>商户好友（35）</span></div>
      </div>
    </div>
  </div>
</template>

<script>
import profile from '@/assets/image/profile.jpg';
export default {
  name: "chat",
  data(){
    return {
      friend:{
        admin:false,
        shop:false
      },
      profile
    }
  },
  methods:{

  }
}
</script>

<style lang="scss" scoped>
  .chat-box{
    background-image: url("../../assets/image/chat.jpg");
    background-size: cover;
    display: flex;
    align-items: center;
    height: 100%;


    .chat{
      display: block;
      background-color: #ffffff;
      height: 65%;
      margin-left: 10%;
      width: 800px;
    }

    .friend{
      display: block;
      width: 300px;
      background-color: #ffffff;
      height: 80%;
      margin-left:auto;
      .search{
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        border-bottom: 3px solid darkgrey;
        padding: 0 10px;

        input{
          margin-left: 10px;
          width: 100%;
          border: 1px;
        }
      }
      .list{
        width: 100%;
        display: block;
        margin-top: 10px;

        .list-name{
          font-size: 15px;
          margin-bottom: 10px;
          cursor:pointer;
          i{
            margin-left: 10px;
          }
          span{
            margin-left: 10px;
          }
        }
      }
    }
  }
</style>
